<!--图片裁剪    -->
<script type="text/javascript" src="${ctxPath}/plugins/Jcrop-0.9.12/js/jquery.Jcrop.js?v=${jsVer }"></script>
<link rel="stylesheet" href="${ctxPath}/plugins/Jcrop-0.9.12/css/jquery.Jcrop.css?v=${jsVer }" type="text/css" />
<script>
    function startJcrop() {
        // 用于头像裁剪
        $('#target img').Jcrop({
            touchSupport : true,
            minSelect : [ 50, 50 ],
            aspectRatio : 1,// 宽高比
            onChange : showCoords,
            onSelect : showCoords,
            onRelease : clearCoords
        }, function() {
            // Use the API to get the real image size
            var bounds = this.getBounds(); // 获取图片实际尺寸
            boundx = bounds[0];
            boundy = bounds[1];
            jcrop_api = this;
            var imgSrc = $("#target img").attr("src");
            getImageWidth(imgSrc, function(w, h) {
                $("#bili").val(w / boundx);
                bilix = boundx / w;
                biliy = boundy / h;
            });
        });
    }
    function showCoords(c) {
        var targetw = 200;
        $('#x1').val(Math.round(c.x / bilix));
        $('#y1').val(Math.round(c.y / biliy));
        $('#x2').val(Math.round(c.x2 / bilix));
        $('#y2').val(Math.round(c.y2 / biliy));
        $('#w').val(Math.round(c.w / bilix));
        $('#h').val(Math.round(c.h / biliy));
        $('#preview').css({
            width : Math.round(targetw / c.w * boundx) + 'px',
            height : Math.round(targetw / c.h * boundy) + 'px',
            marginLeft : '-' + Math.round(targetw / c.w * c.x) + 'px',
            marginTop : '-' + Math.round(targetw / c.h * c.y) + 'px',
        });
    };

    function clearCoords() {
        $('#faceCoords .reset').val('');
    };
    function getImageWidth(url, callback) {
        var img = new Image();
        img.src = url;

        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {
            callback(img.width, img.height);
        } else {
            // 完全加载完毕的事件
            img.onload = function() {
                callback(img.width, img.height);
            }
        }
    }
</script>
<script>
    layui.use([ 'upload', 'form' ], function() {
        var upload = layui.upload; //得到 upload 对象
        var form = layui.form;
        form.render();
        var jcrop_api;
        upload.render({
            elem : '#faceUploadBtn' // 指定原始元素，默认直接查找class="layui-upload-file"
            ,
            title : '点击上传头像',
            method : '',
            url : '/core/jcrop/upload.json',
            //type : '', // 设定上传的文件类型，也可以直接在input设置lay-type="" images:图片 file：文件  video：视频文件 audio：音频文件,
            ext : 'jpg|png|gif' // 自定义可支持的文件扩展名，也可以直接在input设置lay-ext=""来取代
            ,
            done : function(res, input) {
                console.log(res.data.path);
                var fileId = res.data.id;

                var url = "/core/file/inline/" + fileId;
                //var url = res.data.path;

                if (jcrop_api)
                    jcrop_api.destroy();
                var img = "<img src='" + url + "' class='img-responsive' />"
                $("#target").html(img);
                $("#preview").attr("src", url);
                $("#targetSrc").val(url);
                if (res.code == 0) {
                    $("#upload-info").html("文件上传完毕");
                    $("#fileId").val(fileId);
                    $(".jcrop-options").removeClass("layui-hide").show();
                } else {
                    if (res.msg) {
                        $("#upload-info").html(res.msg);
                        return;
                    }
                }
                startJcrop();
            },
            before : function(input) {
                // 返回的参数item，即为当前的input DOM对象
                // console.log('文件上传中');
                $("#upload-info").html("文件上传中");
            }
        });

        form.on('submit(faceSubmit)', function(data){
            Lib.submitForm("/space/savePhoto.json", $(data.form), {}, function(data){
                console.log(data);
                Common.info("头像更新成功");
                return false;
            })
        });
    });

    $(function() {

        startJcrop();

        // 用户裁剪图片时获得位置等参数
        $('#coords').on('change', 'input', function(e) {
            var x1 = $('#x1').val(), x2 = $('#x2').val(), y1 = $('#y1').val(), y2 = $('#y2').val();
            jcrop_api.setSelect([ x1, y1, x2, y2 ]);
        });

        // 裁剪图片完成时
        $(document).on("submit", "#faceCoords", function() {
            $.get(this.action, $(this).serialize(), function(res) {
                console.log(res);
                $("#savedView").empty();
                if (res.code == 0) {
                    var fileId = res.data.id;
                    var url = "/core/file/inline/" + fileId;
                    $("#savedView").html("<div>你的头像</div><img class='img-responsive' src='" + url + "' />");
                    $("#cropFileId").val(res.data.id);
                    $("#faceForm").show();

                } else {
                    $("#savedView").html(res.msg);
                }

            }, "json")
            return false; // 阻止表单自动提交事件
        });
    })
</script>
<div class="">
    <div class="line">
        <button class="layui-btn test" id="faceUploadBtn">上传图片</button>
        <span id="upload-info"></span>
    </div>
    <div class="layui-row margin-top jcrop-options layui-hide grid">
        <div class="layui-col-md9 layui-col-xs12">
            <div id="target"></div>
            <div class="text-yellow">请在图片上拖拽选取合适的区域进行裁剪</div>
            <form id="faceCoords" class="coords " action="/jcropOperateImage" method="get">
                <input type="hidden" name="fresh" id="fresh" /> <input type="hidden" name="fileId" id="fileId" />
                <div class="">
                    <div class="line margin-top">
                        <input type="text" class="input" name="src" id="targetSrc" value="" />
                    </div>
                    <div class="line margin-top">
                        <label>X1 <input type="text" size="4" id="x1" name="x" class="reset" /></label> <label>Y1 <input type="text" size="4" id="y1" name="y" class="reset" /></label> <label>X2 <input type="text" size="4" id="x2" name="x2" class="reset" /></label> <label>Y2 <input type="text" size="4" id="y2" name="y2" class="reset" /></label> <label>W <input type="text" size="4" id="w" name="width" class="reset" /></label> <label>H <input type="text" size="4" id="h" name="height" class="reset" /></label>
                        <label>H <input type="text" size="4" id="bili" name="" /></label>
                    </div>
                </div>
                <div class="align-center">
                    <input type="submit" class="button border-main" value="裁剪" />
                </div>
            </form>
        </div>
        <div class="layui-col-md3 layui-col-xs12 align-center">
            <div class="hidden">
                <div>预览：</div>
                <div style="width: 200px; height: 200px; overflow: hidden; border: 1px solid gray;">
                    <img id="preview" width="200px" height="200px" style="max-width: none" />
                </div>
            </div>
            <div id="savedView" class="text-center margin-small-top"></div>
            <form class="layui-form" onsubmit="return false" id="faceForm" style="display: none">
                <input type="hidden" value="" name="cropFileId" id="cropFileId" /> <input type="button" value="保存头像" class="button" lay-submit lay-filter="faceSubmit" />
            </form>
        </div>
        <div class="xl12 xm12"></div>
    </div>
</div>